<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<title>图书列表</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
<script src="/resources/layui/layui.js" charset="utf-8"></script>
<style type="text/css">
th, td {
	text-align: center !important;
}
</style>
</head>
<body style="padding: 20px 6px; background-color: #e6e6e6c2;">
	<form hidden="hidden" id="edit_form" class="layui-form layui-form-pane"
		action="/book_edit" method="post" style="margin:16px 10px 16px 10px;">
		<div class="layui-form-item">
			<label class="layui-form-label">图书ID</label>
			<div class="layui-input-block">
				<input id="edit_id" readonly="readonly" type="text" name="id"
					required lay-verify="required" placeholder="图书ID"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图书名称</label>
			<div class="layui-input-block">
				<input id="edit_name" type="text" name="name" required
					lay-verify="required" placeholder="请输入标题" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图书作者</label>
			<div class="layui-input-block">
				<input id="edit_author" type="text" name="author" required
					lay-verify="required" placeholder="图书作者" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出版社</label>
			<div class="layui-input-block">
				<input id="edit_press" type="text" name="press" required
					lay-verify="required" placeholder="出版社" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出版年月</label>
			<div class="layui-input-block">
				<input id="edit_form_date" type="text" name="publicationTime"
					required lay-verify="required" placeholder="出版年月"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">页数(页)</label>
			<div class="layui-input-block">
				<input id="edit_pagesNumber" type="text" name="pagesNumber" required
					lay-verify="required" placeholder="页数(页)" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">定价(分)</label>
			<div class="layui-input-block">
				<input id="edit_price" type="text" name="price" required
					lay-verify="required" placeholder="定价(分)" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">装帧</label>
			<div class="layui-input-block">
				<input id="edit_bindingLayout" type="text" name="bindingLayout"
					required lay-verify="required" placeholder="装帧" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">众书</label>
			<div class="layui-input-block">
				<input id="edit_series" type="text" name="series" required
					lay-verify="required" placeholder="众书" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图书ISBN(国际标准书号)</label>
			<div class="layui-input-block">
				<input id="edit_isbn" type="text" name="isbn" required
					lay-verify="required" placeholder="图书ISBN(国际标准书号)"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" hidden="hidden">
			<div class="layui-input-block">
				<button id="edit-form-submit" class="layui-btn" lay-submit>提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<form hidden="hidden" id="add_form" class="layui-form layui-form-pane"
		action="/book_add" method="post" style="margin:16px 10px 16px 10px;">
		<div class="layui-form-item">
			<label class="layui-form-label">图书名称</label>
			<div class="layui-input-block">
				<input type="text" name="name" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图书作者</label>
			<div class="layui-input-block">
				<input type="text" name="author" required lay-verify="required"
					placeholder="图书作者" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出版社</label>
			<div class="layui-input-block">
				<input type="text" name="press" required lay-verify="required"
					placeholder="出版社" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出版年月</label>
			<div class="layui-input-block">
				<input id="add_form_date" type="text" name="publicationTime"
					required lay-verify="required" placeholder="出版年月"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">页数(页)</label>
			<div class="layui-input-block">
				<input type="text" name="pagesNumber" required lay-verify="required"
					placeholder="页数(页)" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">定价(分)</label>
			<div class="layui-input-block">
				<input type="text" name="price" required lay-verify="required"
					placeholder="定价(分)" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">装帧</label>
			<div class="layui-input-block">
				<input type="text" name="bindingLayout" required
					lay-verify="required" placeholder="装帧" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">众书</label>
			<div class="layui-input-block">
				<input type="text" name="series" required lay-verify="required"
					placeholder="众书" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图书ISBN(国际标准书号)</label>
			<div class="layui-input-block">
				<input type="text" name="isbn" required lay-verify="required"
					placeholder="图书ISBN(国际标准书号)" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" hidden="hidden">
			<div class="layui-input-block">
				<button id="add-form-submit" class="layui-btn" lay-submit>提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<div>
		<div>
			<form class="layui-form" action="/book_list" method="post">
				<button type="button" class="layui-btn"
					style="margin-bottom: 16px;margin-left: 10px" onclick="addBook()">新增图书</button>
				<div class="layui-form-item layui-input-inline"
					style="margin-left: 10px">
					<input type="text" name="bookName" lay-verify="required"
						placeholder="图书名称模糊查询" autocomplete="off" value="${bookName}"
						class="layui-input layui-input-inline">
					<button class="layui-btn layui-input-inline" lay-submit
						lay-filter="findApplicationListForm" style="width: 60px;">搜索</button>
					<div class="layui-input-inline"
						style="color: red;font-size: 20px;font-weight: bold;margin-left: 20px;margin-top: 5px">执行时间：${executionTime}ms</div>
				</div>
			</form>
		</div>
		<table class="layui-table" style="text-align: center;">
			<thead>
				<tr>
					<th>图书ID</th>
					<th>图书名称</th>
					<th>图书作者</th>
					<th>出版社</th>
					<th>出版年月</th>
					<th>页数(页)</th>
					<th>定价(元)</th>
					<th>装帧</th>
					<th>众书</th>
					<th>图书ISBN(国际标准书号)</th>
					<th style="width: 82px">操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${bookList}" var="book">
					<tr>
						<td name="id">${book.id}</td>
						<td name="name">${book.name}</td>
						<td name="author">${book.author}</td>
						<td name="press">${book.press}</td>
						<td name="publicationTime"><fmt:formatDate
								value="${book.publicationTime}" pattern="yyyy-MM-dd" /></td>
						<td name="pagesNumber">${book.pagesNumber}</td>
						<td name="price">${book.price/100.0}</td>
						<td name="bindingLayout">${book.bindingLayout}</td>
						<td name="series">${book.series}</td>
						<td name="isbn">${book.isbn}</td>
						<td>
							<button type="button" onclick="editBook(this)"
								class="layui-btn layui-btn-warm layui-btn-xs">修改</button>
							<button type="button" onclick="delBook(${book.id})"
								class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript">
	var editBook,
		addBook,
		delBook;
	layui.use([ 'layer', 'laydate', 'form' ], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			laydate = layui.laydate,
			form = layui.form;
		$(function() {
			laydate.render({
				elem : '#edit_form_date'
			});
			laydate.render({
				elem : '#add_form_date'
			});
		})
		editBook = function editBook(book) {
			var tr = book.parentNode.parentNode;
			var tds = tr.children;
			for (var i = 0; i < tds.length; i++) {
				if (tds[i].getAttribute("name") == "id") {
					$("#edit_id").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "author") {
					$("#edit_author").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "press") {
					$("#edit_press").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "publicationTime") {
					$("#edit_form_date").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "pagesNumber") {
					$("#edit_pagesNumber").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "price") {
					$("#edit_price").val(tds[i].innerText * 100);
				} else if (tds[i].getAttribute("name") == "bindingLayout") {
					$("#edit_bindingLayout").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "series") {
					$("#edit_series").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "isbn") {
					$("#edit_isbn").val(tds[i].innerText);
				} else if (tds[i].getAttribute("name") == "name") {
					$("#edit_name").val(tds[i].innerText);
				}
			}
			layer.open({
				title : "修改图书信息",
				anim : 1,
				resize : false,
				scrollbar : false,
				area : [ '600px' ],
				type : 1,
				content : $("#edit_form"),
				btn : [ '提交' ],
				yes : function(index, layero) {
					$("#edit-form-submit").click();
				}
			});
		}
		addBook = function addBook() {
			layer.open({
				title : "新增图书",
				anim : 1,
				resize : false,
				scrollbar : false,
				area : [ '600px' ],
				type : 1,
				content : $("#add_form"),
				btn : [ '提交' ],
				yes : function(index, layero) {
					$("#add-form-submit").click();
				}
			});
		}
		delBook = function delBook(id) {
			layer.confirm('确认删除ID为' + id + '的图书信息吗？', {
				btn : [ '确认', '取消' ] //按钮
			}, function() {
				location.href = "/book_del/" + id;
			}, function() {
				layer.close(layer.index);
			});
		}
	});
</script>
</html>
